<template>
  <div class="about">
    <div class="head">
        <div class="head clear" style="display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:center;">
      <div class="div" style="margin-right:60px;display:flex;align-items:center;" @click="$router.go(-1)">
          <img src="../../assets/image/返回白@2x.png" alt="" class="percen">
          <span class="sapn1" style="color:#fff;">返回</span>
      </div>
        <div class="div">
            <span class="sapn2" style="color:#fff;">康复服务记录</span>
        </div>
        <div class="div" style="margin-left:60px;display:flex;align-items:center;" @click="newperple()">
          <div v-show="isDoc">
          <img src="../../assets/image/新建@2x.png" alt="" class="percen" style="width: 13px;
  height: 13px;">
          <span class="sapn1" style="color:#fff;">新建</span>
          </div>
      </div>
    </div>
    <div class="main">
        <van-collapse v-model="activeName" accordion>
        <van-collapse-item :name=k+1 class="msg" v-for="(item,k) in show" :key="k" @change="ada(activeNames)">
          <div slot="title">服务日期:{{item.fuwutime}} 服务人员:{{item.fuwurenyuan}}</div>

            <ol>
              <li v-for="(item,index) in item.serviceXiangMuName" :key="index">
                    {{item}}
              </li>
            </ol>
            <!-- <img :src=item.disqianming alt=""> -->
            <!-- <span v-for="(item,k) in show1" :key="k"></span> -->
        </van-collapse-item>
        </van-collapse>
    </div>
    </div>
  </div>
</template>
<script>
import {listServiceRecord} from '../../apiCanJi/apiCanji'

export default {
  data () {
    return {
      activeName: '1',
      // show:[{name:1,text:"服务日期：2020-09-25 服务人员：郑子丰",default:"服务日期"},{name:2,text:"服务日期：2020-09-25 服务人员：郑子丰22"},{name:3,text:"服务日期：2020-09-25 服务人员：郑子丰"},{name:4,text:"服务日期：2020-09-25 服务人员：郑子丰"},{name:5,text:"服务日期：2020-09-25 服务人员：郑子2丰"}],
      // show1:[{name:1,default:"服务日期"},{name:2,default:"服务日期222"},{name:1,default:"服务日期"},{name:1,default:"服务日期"}]
      show: [],
      show1: [],
      isDoc: false
    }
  },
  methods: {
    newperple () {
      this.$router.push('recovery')
    },
    ada (k) {
      //  this.show1=this.show[k].serviceXiangMuName
      console.log(1)
    },
    day () {
      var id = JSON.parse(localStorage.disid).id
      console.log(id)
      listServiceRecord({dpid: id}).then(res => {
        console.log(res)
        this.show = res

        //  this.show1=this.show[1].serviceXiangMuName
      })
    }
  },
  created () {
    this.day()
    document.title = '康复服务记录'
    var role = sessionStorage.role
    if (role === 1) {
      this.isDoc = false
    } else if (role > 1) {
      this.isDoc = true
    } else {
      this.isDoc = false
    }
  }
}
</script>
<style scoped>
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.clear {
  zoom: 1;
}

.head{
  width: 100%;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F1 0%, #1DC7F1 100%);
  position: fixed;
  top:0px;
  z-index:100;
}
.percen{
  width: 15px;
  height: 15px;
  margin: 0px 5px 0px 15px;

}
.head .percen{
    width: 7px;
  height: 13px;
}
/* .span1{
  width: 59.5px;
  height: 14.5px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  float: left;
  margin-right: 60px;
} */
.div {
  /* float: left; */
  font-size: 15px;
  font-weight: bold;
}
/* .span2{
  width: 67px;
  height: 16px;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
} */
.msg{
    width: 100%;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
}
ol{
     list-style-type: decimal;
     margin-left: 16px;
}
>>> .van-collapse-item__content{
    padding-top: 0px;
    padding-bottom: 0px;
}
ol li{
    height: 30px;
    font-size: 15px;
    padding-left: 20px;
}
.main{
  margin-top: 44px;
}
</style>
